<template>
  <div class="type-table">
    <el-row class="header-title" :gutter="5">
      <el-col :span="6">
        <div class="title">{{$t('ContactPortrait.Time')}}</div>
      </el-col>
      <el-col :span="3">
        <div class="title">{{$t('ContactPortrait.Type')}}</div>
      </el-col>
      <el-col :span="6">
        <div class="title">{{$t('ContactPortrait.Channel')}}</div>
      </el-col>
      <el-col :span="9">
        <div class="title">{{$t('ContactPortrait.Details')}}</div>
      </el-col>
    </el-row>
    <div class="main" :style="{height: typeTable.length > 7 ? 350 + 'px' : typeTable.length * 40 + 'px'}">
      <el-scrollbar style="height: 100%;" ref="elscrollbar">
        <el-row class="content" :gutter="5" v-for="(item, index) in typeTable" :key="index">
          <el-col :span="6">
            <div class="item">{{item.time}}</div>
          </el-col>
          <el-col :span="3">
            <div class="item">{{item.type}}</div>
          </el-col>
          <el-col :span="6">
            <div class="item">{{item.channel}}</div>
          </el-col>
          <el-col :span="9">
            <div class="item" v-if="item.type === '设备解绑' || item.type === '设备绑定'">
              设备 {{item.details.length}} 个 <span class="detial-span" @click="showDetial(item)"
                                                 v-show="!item.isShow">详情</span>
              <el-col :span="24" v-show="item.isShow">
                <span class="detial-content" v-for="(item2, index2) in item.details" :key="index2">{{item2}} <i class="i-icon">,</i></span>
                <div style="text-align: right;margin-right: 15px"><span class="detial-span"
                                                                        @click="overDetial(item)">收起</span></div>
              </el-col>
            </div>
            <div class="item" v-else>{{item.details}}</div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  export default {
    name: "typeTable",
    props: {
      typeTable: {
        type: Array,
        required: true,
        default: [],
      }
    },
    data() {
      return {
//        typeTable: [
//          {
//            time: '20191211 17:02',
//            type: '解绑',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '绑定',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '咨询',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '保修',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快dfgjlkdfjgjfgmfkj的黄金分割发挥到了看过了建哦胡椒粉老公i共患难两块凉快了警方关联方借款'
//          },
//          {
//            time: '20191211 17:02',
//            type: '认证',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '关注',
//            channel: '联想商用微信号',
//            details: '' // 关注的是空
//          },
//          {
//            time: '20191211 17:02',
//            type: '解绑',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '绑定',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '咨询',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '保修',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快dfgjlkdfjgjfgmfkj的黄金分割发挥到了看过了建哦胡椒粉老公i共患难两块凉快了警方关联方借款'
//          },
//          {
//            time: '20191211 17:02',
//            type: '认证',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '关注',
//            channel: '联想商用微信号',
//            details: '' // 关注的是空
//          },
//          {
//            time: '20191211 17:02',
//            type: '解绑',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '绑定',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '咨询',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '保修',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快dfgjlkdfjgjfgmfkj的黄金分割发挥到了看过了建哦胡椒粉老公i共患难两块凉快了警方关联方借款'
//          },
//          {
//            time: '20191211 17:02',
//            type: '认证',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '关注',
//            channel: '联想商用微信号',
//            details: '' // 关注的是空
//          },
//          {
//            time: '20191211 17:02',
//            type: '解绑',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '绑定',
//            channel: '企业微信号',
//            details: ['abcd', '1234', 'edes32'],
//            isShow: false
//          },
//          {
//            time: '20191211 17:02',
//            type: '咨询',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '保修',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快dfgjlkdfjgjfgmfkj的黄金分割发挥到了看过了建哦胡椒粉老公i共患难两块凉快了警方关联方借款'
//          },
//          {
//            time: '20191211 17:02',
//            type: '认证',
//            channel: '联想商用微信号',
//            details: '已建立对话噢鹅肉就，，的看法定发快'
//          },
//          {
//            time: '20191211 17:02',
//            type: '关注',
//            channel: '联想商用微信号',
//            details: '' // 关注的是空
//          },
//        ]
      }
    },
    methods: {
      showDetial(item) {
        item.isShow = true
      },
      overDetial(item) {
        item.isShow = false
      },
    },
    mounted() {
      var div = this.$refs['elscrollbar'].$refs['wrap'];
      this.$nextTick(() => {
        div.onscroll = function () {
          if (div.scrollHeight - div.clientHeight === div.scrollTop) {
            console.log('滚动到底部了')
          }
        }
      })
    },
  }
</script>

<style lang="scss" scoped>
  .type-table {
    font-family: Helvetica;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.70);
    .header-title {
      margin-bottom: 10px;
      .title {
        font-family: Helvetica;
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.70);
      }
    }
    .main {
      /*height: 350px;*/

      /*padding: 0 10px;*/
      /*border: 1px solid #000;*/
      /*overflow-y: auto;*/
      /*overflow-x: hidden;*/
    }
    .content {
      margin-bottom: 12px;
      .item {
        .detial-span {
          cursor: pointer;
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #108EE9;
          text-decoration: underline;
          margin-left: 15px;
          &:hover {
            font-weight: bold;
          }
        }
        .detial-content {
          display: inline-block;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #000000;
          line-height: 17px;
          &:nth-last-child(2) {
            .i-icon {
              display: none;
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .type-table {
    .el-scrollbar__wrap {
      overflow-x: hidden;
      margin-bottom: 0!important;
    }
    .el-scrollbar__bar.is-horizontal {
      display: none;
    }
  }
</style>
